<template>
    <div class="cart">
    <Header  title="购物车" :edit="true"/>
    <cart-detail v-if="isShow" :changeShow="changeShow"/>
    <Empty v-else />
    <Footer />
    </div>
</template>
<script>
import  Footer from "../../components/Footer.vue";
import  Empty from "../../components/Empty.vue";
import Header from "../../components/Header.vue";
import CartDetail from './components/CartDetail.vue'
import { useStore } from "vuex";
import { onMounted,fer } from "vue";
export default {
    components:{
        Footer,
        Empty,
        Header,
        CartDetail,
    },
    setup(){
        const isShow =fer(true);
        const store = useStore();
        
        const init = () =>{
            if (store.state.cartList.length === 0){
                isShow.value = false;
            }
        };
        const changeShow = () =>{
            isShow.value = false;
        };
        onMounted(()=>{
            init();
        });
        return{
            isShow,
            changeShow,
        };
    },
};
</script>

<style lang="less" scoped>
.cart{
   display: flex;
   flex-flow: column;
   height: 100%;
   .content{
    flex: 1;
    overflow-y: auto;
   }
}
</style>